<template>
	<view class="content">
		<view class="fixed-layout">
			<!-- 排序标签 -->
			<view class="list-sort-bar posts-sort">
				<button class="sort-button selected">进行中</button>
				<button class="sort-button">已结束</button>
				<button class="sort-button">我参与的</button>
			</view>
		</view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block half"></view>

		<!-- 活动列表 -->
		<view class="activity-card-list row-sort">

			<view class="activity-card important-activity">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<view class="corner-sign vip-belong"></view>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat"><icon type="" class="fontIcon icon-number-hot" />12830912</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn btn-important">进行中</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
			<view class="activity-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="activity-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄</view>
					<view class="heat">
						<icon type="" class="fontIcon icon-number-hot" />12830912
					</view>
					<view class="time">2023.10.20~2023.10.30</view>
				</view>
				<view class="station">
					<button class="small-btn">已结束</button>
				</view>
			</view>
		</view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>

	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
	            indicatorDots: false,
	            autoplay: true,
	            interval: 2000,
	            duration: 500
	        }
	    },
	    methods: {
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        }
	    }
	}
</script>
